<template>
  <div ref="echarts" class="echarts"></div>
</template>

<script>
import Echarts from 'echarts'
export default {
  data() {
    return {
      myChart: {}
    }
  },

  props: ['echartObj'],

  created() {},
  watch: {
    echartObj() {
      // console.log(this.timesharing);
      // console.log(this.startdate);
      this.$nextTick(() => {
        this.loadEchart()
      })
    }
  },
  mounted() {
    let _this = this
    setTimeout(() => {
      this.loadEchart()
    })
    window.onresize = function() {
      _this.myChart.resize()
    }
    window.addEventListener('resize', this.resizeFun)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeFun)
  },
  methods: {
    resizeFun() {
      this.myChart.resize()
    },
    loadEchart() {
      //   console.log(this);
      this.myChart = Echarts.init(this.$refs.echarts) // 动态绑定Id名这样就能解决传多个Echarts过来后只显示一个问题
      this.myChart.setOption({
        legend: this.echartObj.legend,
        color: this.echartObj.color,
        series: this.echartObj.series,
        tooltip: this.echartObj.tooltip,
        grid: this.echartObj.grid,
        xAxis: this.echartObj.xAxis,
        yAxis: this.echartObj.yAxis,
        radar: this.echartObj.radar,
        timeline: this.echartObj.timeline,
        baseOption: this.echartObj.baseOption,
        options: this.echartObj.options,
        backgroundColor:this.echartObj.backgroundColor
        ,dataZoom:this.echartObj.dataZoom
      })
    }
  }
}
</script>
<style scoped>
.echarts {
  width: 100%;
  height: 100%;
}
</style>